<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=,device-width initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="D:/Mystyle.css">
</head>

<body>
    <div class="relative">
        <div class="absolute">
        </div>

    </div>
    <div class="sticky">顶部定位</div>
    <div class="fixed">视口定位</div>
    <p hidden>这是一个隐藏标题</p>
    <p style="text-transform: uppercase;text-indent: 30px; text-shadow: 2px 2px gold; letter-spacing: 10px; line-height: 10px;">liningjdhydjkandeytqj</p>
    <p style="text-decoration: underline;">日记年</p>
    <div class="tran-time"></div>
    <div class="translate"></div>
    <ul>
        <li style="background-color: #4caf50;">主页</li>
        <li>新闻</li>
        <li>联系</li>
        <li>关于</li>
    </ul>
    <p id="pera1">哈哈</p>
    <p class="Mystyle">嘻嘻</p>
    <form action="/" method="post">
        <label for="name">用户名</label>
        <input type="text" id="name" name="name" required>
        <br>
        <label for="password">密码 </label>
        <input type="text" id="password" name="password" required>
        <br>
        <label >性别:</label>
        <input type="radio" id="male" name="gender" value="male" checked>
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label>
        <br>
        <label for="">爱好</label>
        <input type="checkbox" value="bike">我喜欢自行车
        <input type="checkbox" value="car">我喜欢小汽车
        <br>
        <input type="submit" >
        </form>

    <div class="taobao">
    <div class="ni">猜你喜欢</div>
    <div style="margin-left:60px">运动户外</div>
    <div style="margin-left:60px">馋嘴零食</div>
    <div style="margin-left:60px">潮电数码</div>
    <div style="margin-left: 60px;">服饰时尚</div>
    <div style="margin-left: 60px;">家装建材</div>
    <div class="">办公文具</div>
    <div class="titles">健康保健</div>
</div>
    <div class="title">抖音</div>
    <div class="content">
        <div class="s">1</div>
        <div class="h">2</div>
    </div>
    <div class="jiewei">这是网页的结尾</div>

   <table border="5"> 
        <tr>
            <th><周一></th>
            <th><周三</th>
        </tr>
        <tr>
            <td>莹莹, 日记年</td>
            <td>莹莹, 日记年</td>
        </tr>
        <tr>
            <td>庄雅淑, 庄雅淑</td>
            <td>俏悄悄, 俏悄悄</td>
        </tr>
    </table>
    <p>这是一个<span style="color: aqua;" >文本</p>
    <!-- <p style="background-color: aqua;color:rebeccapurple;">这个段落<br>代表<br>分行</p> -->
    <h1>日记年</h1>
    <h2>日记年</h2>
    <h3>日记年</h3>
    <img src="d:\WeChat Files\wxid_xfpr8lpeeoen22\FileStorage\Temp\27172bf5dc1a5e571185a0f0f541fd8.jpg" class="jinchanchan">

    <p>将鼠标移上并跳转此链接: <a href="https://baike.baidu.com/" >浏览器.com</a></p>
    <div class="ALL-three">
        <p class="xixi"></p>
        <p class="haha"></p>
        <p class="miaomiao"></p>
    </div> 
    <div class="ALL-two">
        <p class="hehe"></p>
        <p class="yingying"></p> 
    </div1>
    
    <p class="change-color">代码</p>
    <style>
        body{
            background-image: url(c:\Users\日记年\Desktop\1.png);
            background-repeat: no-repeat;
            background-position: right top;
        }
        #pera1{
            border: 2px solid rebeccapurple;
        }
        body{
            /* background-image: url(d:\微信图片_20250226083028.jpg); */
        }
        .ni{
            color: yellow;
        }
        .taobao{
            display: flex;
        }
        .title{
            background-color: blueviolet;
            border: 1px solid black;
            height: 30px;
        }
        .content{
            display: flex;
        }
        .s{
            width: 30%;
            height: 200px;
            border: 1px solid greenyellow;
            background-color: aqua;
        }
        .h{
            width: 70%;
            height: 200px;
            border: 1px solid rebeccapurple;
            background-color: aliceblue;
        }
        .jiewei {
            text-align: center;
            height: 50px;


            background-color: blue;

        }
        .jinchanchan{
            width: 350px;
            height: 300px;
        }
        .change-color{
            color: green;
            border: 10px solid green;
            background-color: yellow;
            text-align: justify;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border-radius: 100px; 
            font-size: 50px;
            padding: 50px;
        }
        .change-color:hover{
            background: red;
            height: 300px;
            width: 300pxs;
        }
        .ALL-three{
            display: flex;
        }
        .xixi{
            width: 50px;
            height: 50px;
            border:4px solid blue ;
            border-radius: 50%;
        }
        .haha{
            width: 50px;
            height: 50px ;
            border: 4px solid black;
            border-radius: 50%;
            margin-left: -15px;
        }
        .miaomiao{
            width: 50px;
            height: 50px;
            border:4px solid red ;
            border-radius: 50%;
            margin-left: -15px;
        }
        .ALL-two{
            display: flex;
            margin-top:  -58PX;
            margin-left: 20PX;
        }
        .hehe{
            width: 50px;
            height: 50px;
            border:4px solid yellow ;
            border-radius: 50%;
        }
        .yingying{
            width: 50px;
            height: 50px;
            border:4px solid green ;
            border-radius: 50%;
            margin-left: -15PX;
        }
    </style>

</body>
</html>